<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jq增删改查节点操作</title>
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
</head>
<style>
    body {
        width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    button {
        width: 300px;
        margin-bottom: 10px;
    }

    #btnList {
        float: left;
    }

    #total {
        width: 450px;
        float: left;
    }

    ul {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
    }

    .inner li {
        border-style: solid;
        border-width: 1px;
        padding: 5px;
        margin: 5px;
        background-color: #99ff99;
        float: left;
    }

    .inner {
        width: 400px;
        border-style: solid;
        border-width: 1px;
        margin-bottom: 10px;
        padding: 10px;
        float: left;
    }
</style>
<body>
    <div id="total">
        <div class="inner">
            <p>
                你喜欢哪个城市?
            </p>

            <ul id="city">
                <li id="bj">北京</li>
                <li>上海</li>
                <li>东京</li>
                <li>首尔</li>
            </ul>

        </div>
    </div>
    <div id="btnList">
        <div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
        <div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
        <div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
        <div><button id="btn04">删除#bj节点</button></div>
        <div><button id="btn05">读取#city内的HTML代码</button></div>
        <div><button id="btn06">设置#bj内的HTML代码</button></div>
        <div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
    </div>
</body>
<script>
  $(document).ready(function(){
      // 创建一个"广州"节点,添加到#city下
     $('#btn01').click(function(){
         var text = "广州"
        $("#city").append(`<li>${text}</li>`)
        
     })
     // 将"广州"节点插入到#bj前面
     $('#btn02').click(function(){
        var text = "广州"
        $('#city').prepend(`<li>${text}</li>`)
     })
    //  使用"广州"节点替换#bj节点
    $('#btn03').click(function(){
        var text = "广州"
        $('#bj').replaceWith(`<li>${text}</li>`)
    })
    // 删除#bj节点
    $('#btn04').click(function(){
        $('#bj').remove()
    })
    // 读取#city内的HTML代码
    $('#btn05').click(function(){
        alert($('#city').html())
    })
    // 设置#bj内的HTML代码
    $('#btn06').click(function(){
        $('#bj').text("昌平")
    })
    // 创建一个"广州"节点,添加到#city下
    $('btn07').click(function(){
        var text = "广州"
        $("#city").append(`<li>${text}</li>`)
    })

  })
</script>
</html>